<style scoped lang="scss" >
    .bigdata-lef-tmenu-container{
        position: absolute;

        // 颜色向两边 
        // 白色
        // background-image: linear-gradient(transparent, rgba(255, 255, 255, .4), transparent);
        // 亮蓝
        // background-image: linear-gradient(transparent, rgba(31, 251, 223, .4), transparent);

        background-image: linear-gradient(transparent, rgba(57, 116, 148, 0.4), transparent);

        .menu-item{
            height: 70px; margin: 10px; cursor: pointer;
            color: rgba(255, 255, 255, .4);
            text-align: center; 
            padding: 10px 0 0px 0;

            i{
                font-size: 24px;
            }
            .label{
                font-size: 12px;
            }
        }

        .menu-item-active{
            color: rgba(255, 255, 255, 1);
            background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.4), transparent);
        }
    }
</style>
<template>
  <div class="bigdata-lef-tmenu-container" :style="{width: width, height: height}" style="z-index: 10; padding: 46px 0 26px 0;">
      
      <template v-for="(item, index) of menuList">
            <router-link :key="index" :to="item.path" >
                <div class="menu-item" :class="{'menu-item-active' : item.menuId == menuId}" >

                    <i :class="item.icon"></i>
                    <div class="label">{{item.label}}</div>

                    <template v-if="index < menuList.length-1">
                        <el-divider></el-divider>
                    </template>

                </div>
            </router-link>
      </template>
      
  </div>
</template>

<script>
export default {
  name: "BigDataLeftMenu1",
  data() {
    return {
        menuList: {
            'index': {label: '数据中心', menuId: 'index',     icon: 'el-icon-odometer',   path: '/bigData/index'},
            'school': {label: '学校管理', menuId: 'school',     icon: 'el-icon-school',   path: '/bigData/school'},
            'student': {label: '学生管理', menuId: 'student',   icon: 'el-icon-user',     path: '/bigData/student'},
            // 'teacher': {label: '教职工管理', menuId: 'teacher', icon: 'el-icon-s-custom', path: '/bigData/teacher'},
            // 'machine': {label: '设备管理', menuId: 'machine',   icon: 'el-icon-mobile-phone', path: '/bigData/machine'},
            // 'more': {label: '更多', menuId: 'more',          icon: 'el-icon-set-up', path: '/bigData/index'},
        }
    };
  },
  props: {
    width: {
      type: String, default: '80px'
    },
    height: {
      type: String, default: '100%'
    },
    menuId: {
        type: String, default: 'index'
    }
  },
  created(){ 
    //   console.log('菜单');
  },
  methods: { 
      clickMenu(item){
        //   console.log('菜单item', item)
          this.$router.push({ path: item.path  })
      }
  },
};
</script>